<template>
    <el-row class="tac">
      <el-col :span="5">
        <h2 class="mb-2">智能医保欺诈检测系统</h2>
        <el-menu
          default-active="2"
          class="el-menu-vertical-demo"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-sub-menu index="1">
            <template #title>
              <el-icon><location /></el-icon>
              <span>相关模型</span>
            </template>
            <el-menu-item-group title="已有分类模型">
              <el-menu-item @click="()=>handleItemClick('YBC_model')">随机森林</el-menu-item>
              <el-menu-item @click="()=>handleItemClick('svm')">支持向量机</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="本项目模型">
              <el-menu-item @click="()=>handleItemClick('model_pred')">基于MLP的分类模型</el-menu-item>
              <el-menu-item @click="()=>handleItemClick('home')">大语言智能问答模型</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
          <el-menu-item @click="()=>handleItemClick('userpic')">
            <el-icon><icon-menu /></el-icon>
            
            <span>用户画像</span>
          </el-menu-item>
          <el-menu-item @click="handleItemClick1">
            <el-icon><MapLocation /></el-icon>
            展示面板
          </el-menu-item>
          <el-menu-item index="3" disabled>
            <el-icon><document /></el-icon>
            <span>待开发</span>
          </el-menu-item>
          <el-menu-item index="4">
            <el-icon><setting /></el-icon>
            <span>设置</span>
          </el-menu-item>
        </el-menu>
      </el-col>
      <router-view></router-view>
    </el-row>
  </template>
  
  <script lang="ts" setup>
  import {
    Document,
    Menu as IconMenu,
    Location,
    Setting,
    MapLocation
  } from '@element-plus/icons-vue'
  import { useRouter } from 'vue-router';
  import { ref } from 'vue'
  import axios from '@/axios';
  const activeIndex = ref('1')
  const router = useRouter();
  const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
  }
  const handleItemClick = (index: string) => {
   /*
      if (index === 'YBC_model') {
        router.push({ name: 'YBC_model' }); // 跳转至YBC_model.vue页面
      } else if (index === 'userpic') {
        router.push({name:'userpic'})   // 跳转至userpic.vue页面
      }else if(index === 'model_pred'){
        router.push({name:'model_pred'})
      }
      */
      router.push({name:index})
    };

  const handleItemClick1 = () => {
    axios.post('/open', {
      message: "OK"
    })
    .then(response => {
      // 处理响应数据
      console.log(response.data);
    })
    .catch(error => {
      // 处理错误情况
      console.error(error);
    });
};
  </script>